<template>
  <div id="UserRegister">
    <a-card class="login-card">
      <div class="login-header">
        <h2>用户注册</h2>
        <!-- 添加关闭按钮 -->
        <a-button type="text" class="close-button" @click="onClose">
          <template #icon>
            <CloseOutlined />
          </template>
        </a-button>
      </div>
      <a-form
        :model="formState"
        name="normal_register"
        class="login-form"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
      >
        <a-form-item
          name="userAccount"
          :rules="[{ required: true, message: '请输入账号!' }]"
        >
          <a-input
            v-model:value="formState.userAccount"
            size="large"
            placeholder="请输入用户名"
          >
            <template #prefix>
              <UserOutlined class="site-form-item-icon" />
            </template>
          </a-input>
        </a-form-item>

        <a-form-item
          name="userPassword"
          :rules="[{ required: true, message: '请输入密码!' }]"
        >
          <a-input-password
            v-model:value="formState.userPassword"
            size="large"
            placeholder="请输入密码"
          >
            <template #prefix>
              <LockOutlined class="site-form-item-icon" />
            </template>
          </a-input-password>
        </a-form-item>

        <a-form-item
          name="checkPassword"
          :rules="[
            { required: true, message: '请确认密码!' },
            { validator: validateConfirmPassword }
          ]"
        >
          <a-input-password
            v-model:value="formState.checkPassword"
            size="large"
            placeholder="请再次输入密码"
          >
            <template #prefix>
              <LockOutlined class="site-form-item-icon" />
            </template>
          </a-input-password>
        </a-form-item>

        <a-form-item class="login-actions">
          <a-button
            :disabled="disabled"
            type="primary"
            html-type="submit"
            class="login-form-button"
            size="large"
            block
          >
            注册
          </a-button>

          <a href="/login" class="zhuCe">已有账号，去登录!</a>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>
<script lang="ts" setup>
import { reactive, computed } from 'vue';
import { UserOutlined, LockOutlined, CloseOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { loginUsingPost, registerUsingPost } from '@/api/yonghujiekou.ts'
import { useLoginUserStore } from '@/stores/useLoginUseStore.ts'
import router from '@/router'
interface FormState {
  userAccount: string;
  userPassword: string;
  checkPassword: string;
}

// 定义事件发射器
const emit = defineEmits(['register-success', 'close']);

const formState = reactive<FormState>({
  userAccount: '',
  userPassword: '',
  checkPassword: ''
});

// ... existing code ...

const onFinish =async (values: any) => {
  try {
    const res = await registerUsingPost(values);
    if (res.data.code === 0) {
      message.success('注册成功');
      emit('register-success');
      router.push({
        path: '/login',
        replace: true,
      })
    } else {
      message.error('注册失败');
    }
  } catch (error: any) {
    message.error('注册异常:', error);
  }

};

// ... existing code ...


const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
};

// 添加关闭处理函数
const onClose = () => {
  // 关闭后返回主页
  window.location.href = '/';
  // 保持原有事件发射
  emit('close');
};

const disabled = computed(() => {
  return !(formState.userAccount && formState.userPassword && formState.checkPassword);
});

// 验证确认密码
const validateConfirmPassword = (_rule: any, value: string) => {
  if (!value) {
    return Promise.reject('请确认密码!');
  }
  if (value !== formState.userPassword) {
    return Promise.reject('两次输入的密码不一致!');
  }
  return Promise.resolve();
};
</script>
<style scoped>#UserRegister {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background: transparent;
  min-height: auto;
}

#UserRegister .login-card {
  width: 100%;
  max-width: 400px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#UserRegister .login-header {
  text-align: center;
  margin-bottom: 30px;
  position: relative; /* 为关闭按钮定位 */
}

#UserRegister .login-header h2 {
  margin: 0;
  color: #333;
  font-size: 24px;
}

/* 添加关闭按钮样式 */
#UserRegister .close-button {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 18px;
  color: #999;
  border: none;
  background: transparent;
  cursor: pointer;
}

#UserRegister .close-button:hover {
  color: #333;
  background: transparent;
}

#UserRegister .login-form {
  padding: 20px;
}

#UserRegister .login-form :deep(.ant-form-item-label) {
  padding-bottom: 8px;
}

#UserRegister .login-form :deep(.ant-form-item-label label) {
  font-weight: 500;
  color: #555;
}

#UserRegister .site-form-item-icon {
  color: #1890ff;
}

#UserRegister .login-form-button {
  margin-top: 10px;
  font-size: 16px;
  height: 45px;
}

#UserRegister .login-actions {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 20px;
}

#UserRegister .zhuCe {
  text-align: center;
  display: block;
  color: #1890ff;
  text-decoration: none;
}

#UserRegister .zhuCe:hover {
  text-decoration: underline;
}
</style>
